<template>
	<u-popup :show="show" mode="bottom" @close="closeLogin" @open="openLogin">
		<view class="login">
			<view class="container">
				<view class="close-box" @tap="closeLogin" bind:tap="cancel">
					<image class="close-img" src="/static/close.png" />
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="p-name" v-if="getUserInfoTag">
					海洁智能洗衣机平台欢迎您
				</view>
				<button class="submit-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					v-if="getPhoneNumberTag">
					<image src="/static/wechat.png" class="wechat-img" />
					<text>点击获取微信用户信息</text>
				</button>
				<!-- #endif  -->
				<view class="serve-info">点击登录/注册海洁智能洗衣机平台，即表示已阅读并同意</view>
				<view class="serve-text">
					<view @tap="gotoWeb('https://uniapp.dcloud.io/component/mp-weixin-plugin')">《隐私政策》</view>
					<view @tap="gotoWeb('https://developers.weixin.qq.com/miniprogram/dev/framework/')">《用户协议》</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</u-popup>
</template>

<script>
import {
	mapState,
	mapActions
} from 'vuex'
let that;
export default {
	name: "com-login",
	data() {
		return {
			// 登陆组件是否显示
			show: false,
			// 是否获取用户信息
			// #ifndef MP-WEIXIN
			getPhoneNumberTag: false,
			// #endif
			// #ifdef MP-WEIXIN
			getPhoneNumberTag: true,
			// #endif
		};
	},
	mounted() {
		that = this
		that.getwxcode()
	},
	methods: {
		...mapActions(['userLoginAction', 'userLogoutAction']),
		// 关闭弹窗
		closeLogin() {
			this.show = false
		},
		// 打开登陆弹窗
		openLogin() {
			this.show = true
		},
		//获取微信登陆code凭证
		getwxcode() {
			wx.login({
				success: res => {
					that.code = res.code;
					console.log(res, '获取微信登陆code凭证=>', res.code);
				}
			})
		},
		// 微信授权
		getPhoneNumber(e) {
			console.log(e.detail.code, '微信授权=>', errMsg);
			// #ifdef MP-WEIXIN
			that.getwxcode()
			const {
				errMsg
			} = e.detail;
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				console.log('用户拒绝授权=>');
			} else {
				console.log('用户同意授权=>', errMsg);
				//登录凭证校验,返回用户唯一标识、会话密钥
				
				that.$http_api.wechatlogin({
					logincode: that.code,
					phonecode: e.detail.code,
				}).then((res) => {
					that.show = false
					that.userLoginAction(res)
					that.$emit('myevent', res)
				})
			}
			// #endif
		},

	}
}
</script>

<style lang="scss" scoped>
.login {
	display: flex;
	align-items: flex-end;

	.container {
		z-index: 999;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 40upx 20upx;
		background-color: #f1f1f1;
		border-radius: 20upx;
		align-items: center;
		position: relative;

		.p-name {
			margin-top: 48upx;
			font-size: 36upx;
			font-weight: normal;
		}

		.close-box {
			position: absolute;
			right: 32upx;
			top: 38upx;
			width: 56.56upx;
			height: 56.56upx;
			padding: 10upx;

			.close-img {
				width: 70%;
				height: 70%;
			}
		}
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28upx;

		.logo-wrap {
			width: 144upx;
			height: 144upx;
			overflow: hidden;
			border-radius: 20upx;
		}

		.logo {
			width: 100%;
			height: 100%;
		}
	}

	.info {
		color: #333;
	}

	.submit-btn {
		width: 642upx;
		height: 88upx;
		margin-top: 60upx;
		margin-bottom: 60upx;
		border-radius: 44upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #23BF61;
		font-size: 36upx;

		.wechat-img {
			width: 44upx;
			height: 34upx;
			margin: 0 18upx;
		}
	}

	.phone-login {
		color: #0046f5;
		font-size: 28upx;
		margin-top: 40upx;
		border: none;
		background-color: #f1f1f1;
	}

	.cancel-btn {
		width: 100%;
		margin-top: 60upx;
		color: #333;
		background-color: #f1f1f1;
	}

	.serve-info {
		font-size: 22upx;
		margin-top: 20upx;
	}

	.serve-text {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 22upx;
		color: #6079b8;
		margin-top: 10upx;
	}
}

button::after {
	border: none;
}

.btns {
	margin-top: 20upx;
	text-align: center;

	.ubtn {
		display: inline-block;
		margin: 0 20upx;
	}
}

.type {
	margin-top: 80upx;
}
</style>